<template>
    <div class="subject">
      <div v-for="(item,index) in list" :key="item.id">
      <span>{{ item.shu1 }}</span>
      <span>+</span>
      <span>{{ item.shu2 }}</span>
      <span>=</span>
      <input type="number" v-model="lis[index]" />
      <button :value="index" @click="tj(index)">提交</button>
    </div>
      </div>
  </template>
  
  <script>


  export default {
  data(){
    return{
      inpt:['','','','',''],
        list:[
            {id:1,shu1:Math.floor(Math.random() * 10),shu2:Math.floor(Math.random() * 10)},
            {id:2,shu1:Math.floor(Math.random() * 10),shu2:Math.floor(Math.random() * 10)},
            {id:3,shu1:Math.floor(Math.random() * 10),shu2:Math.floor(Math.random() * 10)},
            {id:4,shu1:Math.floor(Math.random() * 10),shu2:Math.floor(Math.random() * 10)},
            {id:5,shu1:Math.floor(Math.random() * 10),shu2:Math.floor(Math.random() * 10)},
        ],
        lis:['','','','',''],
        ssss:['未完成','未完成','未完成','未完成','未完成']
    }
  },
  methods:{
    tj(index){
       this.inpt[index]=this.list[index].shu1+this.list[index].shu2
       console.log(this.inpt[index])

       if(this.lis[index]==''){
        this.ssss[index]='未完成'
        
        this.$emit('tj',this.ssss)
     
        return 
       }
       

       if(this.inpt[index]==this.lis[index]){
        this.ssss[index]='正确'
        
        this.$emit('tj',this.ssss)
     
        return 
       }
      
       if(this.inpt[index]!=this.lis[index]){
        this.ssss[index]='错误'
        
        this.$emit('tj',this.ssss)
    
        return 
       }
       
      
    }
  },
 
  
  };
  </script>
  
  <style scoped>
  .subject {
    margin: 5px;
    padding: 5px;
    font-size: 20px;
  }
  .subject span {
    display: inline-block;
    text-align: center;
    width: 20px;
  }
  .subject input {
    width: 50px;
    height: 20px;
  }
  </style>